<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
    <meta charset="utf-8">
    <title>健康数据可视化 - 历史记录</title>
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='styles.css') }}">
    <script src="https://kit.fontawesome.com/5f3f547070.js" crossorigin="anonymous"></script>
    <link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="{{ url_for('static', filename='script.js') }}" defer></script> <!-- 引入外部 JS 文件 -->
    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>

<body>
    <!-- 网站导航栏 -->
    <div class="container">
        <h2 class='container-heading'><span class="heading_font">个人健康数据可视化 - 历史记录</span></h2>
        <div class='description'>
            <p>查看您过去的健康数据记录。</p>
        </div>
    </div>

    <!-- patient ID 查询 -->
    <div class="patient-id-query-container">
        <input type="text" id="idcard" placeholder="输入患者身份证号" pattern="\d{17}[0-9Xx]|\d{18}"/>
        <button id="query-button" class="my-cta-button" onclick="fetchPatientRecords()">查询患者记录</button>
    </div>

    <!-- 日期选择器 -->
    <div class="date-picker-container">
        <input type="date" id="date-picker" />
        <button id="date-submit" class="my-cta-button" onclick="fetchRecords()">查看该日期的记录</button>
        <button id="view-all" class="my-cta-button" onclick="fetchAllRecords()">查看所有记录</button>
    </div>

    <!-- 历史记录数据表格 -->
    <div class="ml-container">
        <h2>历史输入记录</h2>
        <table id="history-table">
            <thead>
                <tr>
                    <th>患者身份证号</th>
                    <th>用户姓名</th> <!-- 添加用户姓名表头 -->
                    <th>时间</th>
                    <th>性别</th>
                    <th>年龄</th>
                    <th>高血压</th>
                    <th>心脏病</th>
                    <th>吸烟史</th>
                    <th>BMI</th>
                    <th>糖化血红蛋白</th>
                    <th>血糖</th>
                    <th>预测结果</th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>

    <!-- 页码控制 -->
    <div class="pagination">
        <button id="prev-page" class="pagination-button" onclick="changePage(-1)">上一页</button>
        <span id="current-page">第 1 页</span>
        <button id="next-page" class="pagination-button" onclick="changePage(1)">下一页</button>
    </div>

    <!--健康分析模块-折线图 -->
    <div class="ml-container">
        <h2>健康体征分析</h2>
        <div class="checkbox-container">
            <label><input type="checkbox" id="show-gender" checked onclick="updateChart()"> 性别</label>
            <label><input type="checkbox" id="show-age" checked onclick="updateChart()"> 年龄</label>
            <label><input type="checkbox" id="show-bmi" checked onclick="updateChart()"> BMI</label>
            <label><input type="checkbox" id="show-hba1c" checked onclick="updateChart()"> 糖化血红蛋白</label>
            <label><input type="checkbox" id="show-smoking" checked onclick="updateChart()"> 吸烟史</label>
            <label><input type="checkbox" id="show-hypertension" checked onclick="updateChart()"> 高血压</label>
            <label><input type="checkbox" id="show-bloodglucose" checked onclick="updateChart()"> 血糖</label>
            <label><input type="checkbox" id="show-heartdisease" checked onclick="updateChart()"> 心脏病</label>
        </div>
        <canvas id="healthChart" width="400" height="200"></canvas>
    </div>

    <!-- 总体数据可视化 -->
    <div class="chart-container">
        <div>
            <canvas id="diabetesChart" class="chart"></canvas> <!-- 饼图 -->
        </div>
        <div>
            <canvas id="radarChart" class="chart"></canvas> <!-- 雷达图 -->
        </div>
    </div>

</body>
</html>